<template>
  <div>
    <div class="fcRightBox">
      <div class="fcHeader">
        <div class="fcHeader-title-container">
          <div class="left-part">
            <div class="title">关键词报告</div>
            <div class="refresh-data-time"></div>
          </div>
          <div class="right-part">

            <div class="fcHeader-date-pick-container">
              <el-date-picker class="custom-date-picker"
                              format="yyyy/MM/dd"
                              v-model="timerArray"
                              style="width: 240px"
                              type="daterange"
                              align="right"
                              range-separator="~"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="queryList();getKeywordIncrease50List()"
                              :picker-options="pickerOptions">
                <template slot="prefix">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                       class="custom-icon" focusable="false">
                    <path fill="currentColor"
                          d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                  </svg>
                </template>
              </el-date-picker>
              <el-checkbox v-model="checked">比较</el-checkbox>
            </div>

          </div>
        </div>
        <div style="margin-top: 10px">

          <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList">
            <span slot="prefix" class="select-prefix">时间单位:</span>
            <el-option v-for="item in optionsOne"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>

          </el-select>
          <el-select v-model="promotionDevice" placeholder="请选择" class="fcSelect" @change="queryList">
            <span slot="prefix" class="select-prefix">推广设备：</span>
            <el-option
                v-for="item in options01"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <span style="color: #0054e6;font-size: 14px"> 更多筛选</span>
        </div>
      </div>
      <div
          class="light-ai report-sdk-smart-query-area-container light-ai-card light-ai-card-medium light-ai-card-strong">
        <div class="light-ai light-ai light-ai-card-header light-ai-slot light-ai-group" style="gap: 50px;">
          <div class="light-ai light-ai-card-header-main light-ai-slot-main" style="font-size: 16px">智能数据查询</div>
        </div>
        <div class="light-ai-card-body">
          <div
              class="light-ai light-ai light-ai light-ai-omni-input light-ai-omni-input-medium light-ai-slot light-ai-slot-vertical light-ai-group light-ai-group-gap-xsmall">
            <div class="light-ai light-ai-slot-main">
              <div
                  class="light-ai light-ai light-ai-omni-input-main light-ai-slot light-ai-group light-ai-group-gap-medium">
                <div class="light-ai light-ai-slot-main">
                  <div class="light-ai light-ai-rich-input"
                       style="--internal-light-ai-min-rows: 1; --internal-light-ai-max-rows: 5;">
                    <div contenteditable="true" translate="no" class="tiptap ProseMirror"
                         tabindex="0"><p class="is-empty is-editor-empty"><br
                        class="ProseMirror-trailingBreak"></p></div>
                  </div>
                </div>
                <div class="light-ai light-ai-omni-input-after light-ai-slot-after"
                     style="display: flex;align-items: center;justify-content: space-between">
                  <div style="display: inline-block;height: 25px;line-height: 25px">
                    <span
                        class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">0</span><span
                      class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">/100</span></div>
                  <button style="margin-left: 10px;font-size: 24px;"
                          class="light-ai light-ai-omni-input-send light-ai-button light-ai-button-medium light-ai-button-icon light-ai-button-icon-medium light-ai-button-disabled light-ai-button-icon-only"
                          type="button" disabled="">

                    <svg fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                         class="dls-icon light-ai-omni-input-send-icon dls-icon-active"
                         focusable="false">
                      <g stroke-width="2">
                        <path
                            d="m20.7163 11.2981-16.19439-8.85633c-.62917-.34407-1.35838.24963-1.14899.93549l2.56119 8.38934c.04648.1522.04648.3149 0 .4671l-2.56117 8.389c-.20939.6859.51981 1.2796 1.14899.9355l16.19437-8.8563c.5549-.3034.5549-1.1004 0-1.4038z"
                            fill="currentColor" stroke="currentColor"></path>
                        <path d="m4.5 12h9" stroke="#fff"></path>
                      </g>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <p>
          <div class="radio-tag-groups-select-container">
            <div class="radio-tag-groups">
              <div class="radio-tag-groups-container">
                <div class="radio-tag-groups-name"><span>猜你想搜：</span></div>
                <div
                    class="light-ai light-ai radio-tag-groups-tag-group-container light-ai-tag-group light-ai-group light-ai-group-gap-xsmall">
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">转化率最高的3个出价策略</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">起量预算最高的3个出价策略数据</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">目标转化量最高的出价策略数据</span></div>
                </div>
              </div>
            </div>
          </div>
          <button type="button" name="" class="one-button one-main one-button-text-strong one-button-medium">
                        <span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         min-width="24"
                                         height="24" class="dls-icon icon-sync" focusable="false"
                                         style="margin-top: 15px"><path
                            fill="currentColor"
                            d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"></path></svg>换一换</span></span>
          </button>
          </p><p></p></div>
      </div>
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div class="">
          <div class="contentHeader zhibiaoInput" style="display: flex;justify-content: flex-start">
            <p style="margin-right: 20px">重点关键词分析</p>

            <el-select v-model="form.conIndicators" placeholder="请选择" class="fcSelect"
                       @change="queryList()">
              <span slot="prefix" class="select-prefix" style="font-weight: 500">转换指标：</span>
              <el-option v-for="item in conIndicatorsSelectList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>

            </el-select>
          </div>

          <div style="display: flex;align-items: flex-start;justify-content: space-between">

            <div style=";margin-right: 10px;border-right: 1px solid #d4d4d4;position: relative" >
<!--              <img :src="leftImg">-->
              <div :style="backgroundImageStyle" style="font-size: 12px">
                <p style="background: rgb(52,117,246);width: 382px;height: 46px;position: absolute;top: 37px;left: 124px;text-align: center;line-height: 46px;color: white;">展现关键词:{{keywordAnalysisData.toShow}}</p>
                <p style="background: rgb(246,247,251);;width: 270px;height: 46px;position: absolute;top: 83px;left: 180px;text-align: center;line-height: 45px;color: #727272">点击率：{{keywordAnalysisData.click_rate}}%</p>
                <p style="background: rgb(63,142,247);;width: 270px;height: 46px;position: absolute;top: 128px;left: 180px;text-align: center;line-height: 45px;color: white">点击关键词:{{keywordAnalysisData.click}}</p>
                <p style="background: rgb(246,247,251);;width: 107px;height: 46px;position: absolute;top: 174px;left: 260px;text-align: center;line-height: 45px;color: #727272">转化率:{{keywordAnalysisData.avg_click_price}}%</p>
                <p style="background: rgb(99,167,248);;width: 107px;height: 46px;position: absolute;top: 220px;left: 260px;text-align: center;line-height: 45px;color: white">转化关键词：{{keywordAnalysisData.convertKeywords}}</p>
              </div>
            </div>
            <div style="width: 60%">
              <div class="contentHeader" style="display: flex;justify-content: space-between;padding:  10px 0">
                <p style="margin-right: 20px">有展现关键词 TOP 50
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28" width="12" height="12"
                       style="color: #999999" class="dls-icon brave-the-winds-common-libs-tips-icon" focusable="false">
                    <path fill="currentColor"
                          d="M12.054 18.34a1.242 1.242 0 1 0 0-2.484 1.242 1.242 0 0 0 0 2.484zM8.3 9.7a3.7 3.7 0 1 1 5.813 3.038c-.029.021-.064.05-.106.084-.12.1-.28.247-.438.431-.33.385-.569.835-.569 1.307h-2c0-1.148.57-2.048 1.05-2.608a5.739 5.739 0 0 1 .819-.78l-.004-.008a1.82 1.82 0 0 0 .08-.05l.011-.009.072-.052.009-.006A1.69 1.69 0 0 0 13.7 9.7a1.7 1.7 0 1 0-3.4 0h-2z"></path>
                    <path fill="currentColor" fill-rule="evenodd"
                          d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
                          clip-rule="evenodd"></path>
                  </svg>
                </p>

                <div style="width: 300px;display: flex;align-items: center;justify-content: space-between">
                  <span class="zhanxian" :class="btnZhanXian==1?'zhanxianOn':''"
                        @click="btnZhanXian=1;form.sumWay=null;queryList()">展现top50</span>
                  <span class="zhanxian" :class="btnZhanXian==2?'zhanxianOn':''"
                        @click="btnZhanXian=2;sumWay=1;getKeywordIncrease50List()">增幅top50</span>
                  <span class="zhanxian" :class="btnZhanXian==3?'zhanxianOn':''"
                        @click="btnZhanXian=3;sumWay=0;getKeywordIncrease50List()">降幅top50</span>
                </div>
              </div>

              <el-table v-if="btnZhanXian==1" :data="tableData" border>
                <el-table-column prop="name" label="排名" width="80">
                  <template slot-scope="scope">
                    {{ getIndex(scope.$index) }}
                  </template>
                </el-table-column>
                <el-table-column prop="keyword" label="关键词/网址" m></el-table-column>
                <el-table-column prop="toShow" label="展现"></el-table-column>
                <el-table-column prop="proportion" label="占比"></el-table-column>
              </el-table>
              <el-table v-else :data="keywordIncreaseTable" border>
                <el-table-column prop="name" label="排名" min-width="60">
                  <template slot-scope="scope">
                    {{ getIndex(scope.$index) }}
                  </template>
                </el-table-column>
                <el-table-column prop="keyword" label="关键词/网址"></el-table-column>
                <el-table-column prop="sourceInfo" label="所选时段展现"></el-table-column>
                <el-table-column prop="targetInfo" label="对比时段展现"></el-table-column>
                <el-table-column prop="changeRatio" label="展现变化率"></el-table-column>
                <el-table-column prop="changeValue" label="展现变化量"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>

      </div>
      <div class="fcHeader-container fcHeader-container-custom-dash" style="margin-top: 20px">

        <div class="">
          <div class="contentHeader" style="margin-top: 10px">
            <el-input placeholder="请搜索关键词/网址" style="width: 180px;height: 26px!important;line-height: 26px!important; font-size: 12px"
                      v-model="form.searchTerm"><i slot="suffix"
                                                   class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="contentHeader_right" style="justify-content: flex-end">
              <el-dropdown @command="handleCommand" trigger="click" style="margin-right: 16px">
                <el-button style="width: 160px;padding: 6px;text-align: left">
                  <span style="display:inline-block;width: 120px;color: rgba(19, 22, 26, 0.9);font-size: 12px"> <i
                      v-if="!selectedDivision">细分</i><i v-else>细分：</i>{{ selectedDivision }}</span> <i
                    class="el-icon-arrow-down el-icon--right" style="color: rgba(19, 22, 26, 0.9)"> </i>
                </el-button>
                <!-- 第一层子菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="hour">小时</el-dropdown-item>
                  <el-dropdown-item command="purchase">购买方式</el-dropdown-item>
                  <el-dropdown-item command="device">推广设备</el-dropdown-item>
                  <el-dropdown-submenu>
                    <template slot="title">地域</template>
                    <!-- 第二层子菜单 -->
                    <el-dropdown-item command="province">分省</el-dropdown-item>
                    <el-dropdown-item command="city">分地市</el-dropdown-item>
                  </el-dropdown-submenu>
                </el-dropdown-menu>
              </el-dropdown>

              <el-dropdown style="margin-right: 16px">
                <el-button type="primary"
                           style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value11
                    }}</span>

                  <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in options11" :key="item.value">{{ item.label }}</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
              <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择" class="select-with-prefix1">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px;" @click="handleTabClick">重置列宽
              </el-button>
            </div>
          </div>
          <el-table
              :data="tableList" border
              style="width: 100%;background: #EBEDF5;margin-top: 20px"
              :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期" align="left" sortable
                sortable
                min-width="130">
            </el-table-column>
            <el-table-column

                align="left"
                prop="keyword"
                label="标签"
                min-width="130"
            >
              <template slot-scope="scope">
                <div    v-if="scope.$index!==tableList.length-1" class="one-table-row-cell-content">
                  <div class="materiel-list-row-tag">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24"
                         class="dls-icon " focusable="false" style="font-size: 18px;">
                      <path fill="currentColor" fill-rule="evenodd"
                            d="M9.028 7.17a3.502 3.502 0 1 0 3.502 6.067A3.502 3.502 0 0 0 9.028 7.17zm.454 3.783a1.498 1.498 0 1 1 2.594-1.498 1.498 1.498 0 0 1-2.594 1.498z"
                            clip-rule="evenodd"></path>
                      <path fill="currentColor" fill-rule="evenodd"
                            d="M9.236 1.921a4 4 0 0 0-4.858 2.805L2.956 9.86a3 3 0 0 0 .293 2.3l4.885 8.462a5 5 0 0 0 6.83 1.83l4.33-2.5a5 5 0 0 0 1.83-6.83L16.24 4.661a3 3 0 0 0-1.846-1.404L9.236 1.92zM6.306 5.26a2 2 0 0 1 2.428-1.402l5.158 1.336a1 1 0 0 1 .615.468l4.885 8.461a3 3 0 0 1-1.098 4.098l-4.33 2.5a3 3 0 0 1-4.098-1.098l-4.885-8.461a1 1 0 0 1-.098-.767L6.305 5.26z"
                            clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
                                <span v-else>-</span>
              </template>

            </el-table-column>


            <el-table-column
                prop="userName"
                label="账户" align="left"
                sortable
                min-width="130">
            </el-table-column>
            <el-table-column
                prop="promotionPlan" min-width="130"
                label="推广计划" align="left" sortable
            >
            </el-table-column>
            <el-table-column
                prop="promotionUnit"
                label="推广单元"
                sortable align="left"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="keyword"
                label="关键词/网址"
                sortable align="left"
                min-width="130">
            </el-table-column>
            <el-table-column
                prop="toShow" align="right"
                label="展现
"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click" align="right"
                label="点击
"
                sortable
                min-width="130">
            </el-table-column>
            <el-table-column
                prop="consumption" align="right" sortable min-width="130"
                label="消费
"
            >
            </el-table-column>
            <el-table-column
                prop="clickRate"
                label="点击率" align="right"
                min-width="130" sortable
            >
              <template slot-scope="scope">
                {{ scope.row.clickRate }}%
              </template>
            </el-table-column>
            <el-table-column
                prop="avgClickPrice" align="right"
                label="平均点击价格
"
                sortable
                min-width="140">
            </el-table-column>

            <el-table-column
                prop="offer" align="right"
                label="出价
"
                sortable
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="keywordQuality" align="left"
                label="质量度"
                min-width="120" sortable
            >
              <template slot-scope="scope">
                <div style="display: flex;justify-content:space-between;align-items: center" class="tableRate"
                     v-if="scope.$index!==tableList.length-1">
                  <el-rate
                      :max="5"
                      v-model="scope.row.keywordQualityNum"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="">
                  </el-rate>
                  <span>                      {{ scope.row.keywordQuality }}
</span>
                </div>
                <div style="display: flex;justify-content:space-between;align-items: center" class="tableRate" v-else>

                  <span>                  -
</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background
                         style="text-align: right;margin-top: 40px"

                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="form.page"
                         :page-size="form.pageSize"
                         :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                         layout="sizes, prev, pager, next,jumper"
                         :total="form.total">
          </el-pagination>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import imgUrl from './bg.png'
import ItemMixins from "./item.mixins";
import * as echarts from 'echarts';
import {keywordReportList, keywordShowTop50List, getKeywordIncrease50List,keywordAnalysisList} from "@/services/model/datacenter";

export default {
  mixins: [ItemMixins],
  data() {
    return {
      keywordAnalysisData:[],
      keywordIncreaseTable: [],
      sumWay: null,
      btnZhanXian: 1,
      leftImg: imgUrl,
      selectedValue: '',
      cards: [
        {title: '数据总数', value: '16', subvalue: '全年率: 100.00%'},
        {title: '点击总数', value: '16', subvalue: '转化率: 62.50%'},
        {title: '转化总数', value: '10', subvalue: ''} // 可以继续添加更多的卡片数据
      ],
      optionsOne: [
        {value: '分日', label: '分日'},
        {value: '分周', label: '分周'},
        {value: '分月', label: '分月'},

      ], conIndicatorsSelectList: [{
        value: '咨询按钮点击量',
        label: '咨询按钮点击量'
      }, {
        value: '三句话咨询量',
        label: '三句话咨询量'
      }, {
        value: '一句话咨询量',
        label: '一句话咨询量'
      }, {
        value: '小程序线索量',
        label: '小程序线索量'
      },

        {
          value: '有意向客户量',
          label: '有意向客户量'
        }, {
          value: '聊到相关业务',
          label: '聊到相关业务'
        }, {
          value: '回访-电话接通量',
          label: '回访-电话接通量'
        }, {
          value: '回访-信息确认量',
          label: '回访-信息确认量'
        },

        {
          value: '回访-发现意向量',
          label: '回访-发现意向量'
        }, {
          value: '回访-高潜成交量',
          label: '回访-高潜成交量'
        }, {
          value: '回访-成单客户量',
          label: '回访-成单客户量'
        }, {
          value: '表单按钮点击量',
          label: '表单按钮点击量'
        },
        {
          value: '表单调起按钮点击量',
          label: '表单调起按钮点击量'
        }, {
          value: '表单提交成交量',
          label: '表单提交成交量'
        }, {
          value: '电话按钮点击量',
          label: '电话按钮点击量'
        }, {
          value: '电话拨通量',
          label: '电话拨通量'
        },

        {
          value: '下载（预约）按钮点击量',
          label: '下载（预约）按钮点击量'
        }, {
          value: '预约量',
          label: '预约量'
        }, {
          value: '申请量',
          label: '申请量'
        }, {
          value: '授信量',
          label: '授信量'
        },

        {
          value: '放款量',
          label: '放款量'
        }, {
          value: '短信咨询按钮单击量',
          label: '短信咨询按钮单击量'
        }, {
          value: '地图按钮点击量',
          label: '地图按钮点击量'
        }, {
          value: '抽奖按钮点击量',
          label: '抽奖按钮点击量'
        },

        {
          value: '预约按钮点击量',
          label: '预约按钮点击量'
        }, {
          value: '投票按钮点击量',
          label: '投票按钮点击量'
        }, {
          value: '评价按钮点击量',
          label: '评价按钮点击量'
        }, {
          value: '关注按钮点击量',
          label: '关注按钮点击量'
        },

        {
          value: '店铺起调量',
          label: '店铺起调量'
        }, {
          value: '粉丝关注成功量',
          label: '粉丝关注成功量'
        }, {
          value: '微信起调按钮点击量',
          label: '微信起调按钮点击量'
        }, {
          value: '微信加粉成功量',
          label: '微信加粉成功量'
        },
        {
          value: '二次跳转量',
          label: '二次跳转量'
        }, {
          value: '电商订单量',
          label: '电商订单量'
        }, {
          value: '订单提交成功量',
          label: '订单提交成功量'
        }, {
          value: '客户自定义转化量',
          label: '客户自定义转化量'
        },

        {
          value: '微信复制按钮点击量',
          label: '微信复制按钮点击量'
        }, {
          value: '店铺停留转换量',
          label: '店铺停留转换量'
        }, {
          value: '综合线索收集',
          label: '综合线索收集'
        }, {
          value: '商品支付成功量',
          label: '商品支付成功量'
        },


        {
          value: '有效咨询',
          label: '有效咨询'
        }, {
          value: '其他转化量(落地页)',
          label: '其他转化量(落地页)'
        }, {
          value: '微信小程序调起人数',
          label: '微信小程序调起人数'
        }, {
          value: '激活人数',
          label: '激活人数'
        },

        {
          value: '注册人数',
          label: '注册人数'
        }, {
          value: '付费人数',
          label: '付费人数'
        }, {
          value: '付费次数',
          label: '付费次数'
        }, {
          value: '商品下单成功量',
          label: '商品下单成功量'
        },

        {
          value: '深度使用量',
          label: '深度使用量'
        }, {
          value: '次日留存人数',
          label: '次日留存人数'
        }, {
          value: '7日留存人数',
          label: '7日留存人数'
        }, {
          value: '登录人数',
          label: '登录人数'
        },
        {
          value: '应用调起人数',
          label: '应用调起人数'
        }, {
          value: '2日留存人数',
          label: '2日留存人数'
        }, {
          value: '3日留存人数',
          label: '3日留存人数'
        }, {
          value: '4日留存人数',
          label: '4日留存人数'
        },

        {
          value: '5日留存人数',
          label: '5日留存人数'
        }, {
          value: '6日留存人数',
          label: '6日留存人数'
        }, {
          value: '14日留存人数',
          label: '14日留存人数'
        }, {
          value: '其它转化量(APP)',
          label: '其它转化量(APP)'
        }, {
          value: '付费观剧人数',
          label: '付费观剧人数'
        }, {
          value: '2日留存人数',
          label: '2日留存人数'
        },
      ],
      optionsTwo: [
        {value: '咨询按钮点击量', label: '分日'},
        {value: '分周', label: '分周'},
        {value: '分月', label: '分月'},

      ],
      promotionDevice: '移动',
      form: {
        page: 1,
        pageSize: 20,
        total: 0,
        promotionDevice: '移动',
        sumWay: '分日'
      },
      isToggleStatus: false,
      tableData: [
        {name: '网站流量', value: '4,631.58', percentage: '99.98%'},
        {name: '搜索引擎', value: '0.90', percentage: '0.02%'},
      ],
      chart: null,
      value: '下载',
      options01: [{
        value:'全部',
        label: '全部'
      }, {
        value: '计算机',
        label: '计算机'
      }, {
        value: '移动',
        label: '移动'
      },],
      options1: [{
        value: 1,
        label: '消费'
      }, {
        value: 2,
        label: '展示'
      }, {
        value: 3,
        label: '点击'
      }, {
        value: 4,
        label: '平均点击价格'
      }],
      options2: [{
        value: '下载',
        label: '下载'
      }, {
        value: '发送邮箱',
        label: '发送邮箱'
      }],
      options: [{
        value: 0,
        label: '合计'
      }, {
        value: 1,
        label: '分时'
      }, {
        value: 2,
        label: '分日'
      }, {
        value: 3,
        label: '分周'
      }, {
        value: 4,
        label: '分月'
      }],
      isSelect: '账户整体',
      activeName: '整体走势',
      checked: false,
      value1: '',
      value2: ''
    };
  },
  computed: {
    backgroundImageStyle() {
      // 引入背景图片
      const backgroundImage = require('@/assets/bg.png');

      // 返回带有背景图的对象
      return {
        background: `url(${backgroundImage}) no-repeat center center / cover`,
        width: '621px',
        height: '304px'
      };
    }
  }
,
  methods: {
    async getKeywordIncrease50List() {
      let form = JSON.parse(JSON.stringify(this.form))
      form.sumWay = this.sumWay
      let res = await getKeywordIncrease50List(form)
      this.keywordIncreaseTable = res.data || []
    },
    async getkeywordAnalysisList() {
      let form = JSON.parse(JSON.stringify(this.form))
      // form.sumWay = this.sumWay
      let res = await keywordAnalysisList(form)
      this.keywordAnalysisData = res.data || []
    },


    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption({
        title: {
          text: 'TOP5推广单元趋势'
        },
        tooltip: {},
        legend: {
          data: ['激活[已删除]', '网站开发']
        },
        xAxis: {
          axisTick: {
            show: false // 隐藏X轴刻度
          },
          data: ["2023-10-29", "2023-11-21", "2023-12-08", "2023-12-25"]
        },
        yAxis: {}, symbol: 'none',    // 确保数据点完全隐藏
        series: [{
          lineStyle: {
            color: '#00aaff'  // 设置线条颜色
          },
          itemStyle: {
            color: '#00aaff'  // 设置线条颜色
          }, showSymbol: false,
          name: '激活[已删除]',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    },
    async queryList() {
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      console.log(this.promotionDevice)
      if(this.promotionDevice=='全部'){
        this.form.promotionDevice=null
      }else {
        this.form.promotionDevice=this.promotionDevice
      }
      let resData = await keywordShowTop50List(this.form)
      this.tableData = resData.data || []
      let res = await keywordReportList(this.form)
      this.tableList = res.rows || []
      this.tableList.map((x, index) => {
        this.tableList[index].keywordQualityNum = Number(x.keywordQuality) / 2
        if (index == this.tableList.length-1) {
          x.userName = "-"
          x.promotionPlan = "-"
          x.promotionUnit = "-"
          x.keyword = "-"

        }
      })

      this.form.total = Math.ceil(Number(res.total));
      this.getkeywordAnalysisList()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {
    this.queryList();
  },
};
</script>
<style>
</style>
<style scoped lang="less">
.fcRightBox {
  height: 100%;
  width: calc(100vw - 240px);

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {

      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }

      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    padding-top: 12px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }

  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67C23A;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

<
style scoped >
.stacked-cards {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.el-col {
  margin-bottom: -20px; /* 控制卡片重叠的距离 */
  transition: margin 0.3s ease-in-out;
}

.el-col:hover {
  margin-bottom: 10px;
}

.card {
  text-align: center;
  color: #fff;
  background-color: #409EFF;
}

.card .el-card__body {
  padding: 30px 20px; /* 卡片内边距 */
}

.card-content {
  margin-top: 10px;
}

.card-value {
  font-size: 24px;
  line-height: 1.2;
}

.card-subvalue {
  font-size: 14px;
  color: #91ccff;
  margin-top: 10px;
}

/* 可以添加一些媒体查询来改进响应式设计 */
.zhanxian {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;

}

.zhanxianOn {

  background: rgb(220, 233, 255);
  color: rgb(56, 118, 222);
}


</style>

